import { useState, useEffect } from "react";
import { Radio } from "antd";
import "./jisuan.css";
import { getComputeds } from "../../tools/ajax";
let obj = null;
let objs = null;
function Jisuan() {
  const [value1, setValue] = useState("X86");
  const [dataList, setDataList] = useState({});
  const onChange1 = (e) => {
    console.log("radio checked", e.target.value);
    setValue(e.target.value);
    setDataList(objs[e.target.value][value2][value3])
    console.log(dataList)
  };

  const [value2, setValue2] = useState('5G');

  
  const onChange2 = (e) => {
    console.log('radio checked', e.target.value);
    setValue2(e.target.value);
    setDataList(objs[value1][e.target.value][value3])
    console.log(dataList,11);
};

const [value3, setValue3] = useState('虚机');


const onChange3 = (e) => {
    console.log('radio checked', e.target.value);
    setValue3(e.target.value);
    setDataList(objs[value1][value2][e.target.value])
    console.log(dataList,3);
};
  async function aa(){
    let res = await getComputeds({})
    objs = res.data
    setDataList(objs["X86"])
    // console.log(res);
    console.log(dataList);
    setDataList(objs["X86"]["5G"]["虚机"])
  }
  useEffect(() => {
    aa()
}, []);

  return (
    <div className="res">
      <p className="p1">服务器</p>
      <div className="res1">
        <Radio.Group name="radiogroup" onChange={onChange1} defaultValue={value1}>
          <Radio value={"X86"}>X86</Radio>
          <Radio value={"ARM"}>ARM</Radio>
        </Radio.Group>
      </div>
      {/* 2 */}
      <p className="p2">服务器</p>
      <div className="res2">
        <Radio.Group name="radiogroup" onChange={onChange2} defaultValue={value2}>
         <Radio value={"5G"}>5G</Radio>
          <Radio value={"10G"}>10G</Radio>
          <Radio value={"50G"}>50G</Radio>
          <Radio value={"100G"}>100G</Radio>
        </Radio.Group>
      </div>
      {/* 3 */}
      <p className="p3">服务器</p>
      <div className="res3">
        <Radio.Group name="radiogroup" onChange={onChange3} defaultValue={value3}>
         <Radio value={"虚机"}>虚机</Radio>
          <Radio value={"容器"}>容器</Radio>
          <Radio value={"虚机+容器"}>虚机+容器</Radio>
        </Radio.Group>
      </div>
      {/* 5 */}
      <div className="sma1">
      <small>软件费:{dataList.p1}</small>
      <small>硬件费：{dataList.p2}</small>
      <small>硬件费：{dataList.total}</small>
      </div>
      <div className="czw">
         <p className="ps">软件配置图</p>
         <img className="cf2" src={"http://localhost:5000/"+dataList.pic2} alt="" />
      </div>
      <div className="cf">
        <p className="px">硬件配置图</p>
        <img className="imgs" src={"http://localhost:5000/"+dataList.pic2} alt="" />
      </div>
    </div>
  );
}
export default Jisuan;
